<template>
  <a
    href="#"
    class="goTop btn btn-outline-primary position-fixed fs-5"
    v-show="this.scrollTop > 200"
  >
    <i class="bi bi-chevron-double-up fs-5"></i>
  </a>
</template>

<script>
export default {
  name: "NavBar",
  // 组件挂载后添加监听事件
  data() {
    return {
      scrollTop: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.Gotop);
  },
  methods: {
    // 我这里监听的是侧边的滚动条
    Gotop: function() {
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
  },
};
</script>

<style lang="less" scoped>
.goTop {
  right: 1.875rem;
  bottom: 6rem;
  z-index: 9999;
}
</style>
